<template>
    <div class="p-2">
      <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
        <div class="mb-[10px]" v-show="showSearch">
          <el-card shadow="hover">
            <el-form ref="queryFormRef" :model="queryParams"   :inline="true" label-width="110px" label-suffix=":">
              <el-form-item label="创建时间" >
                <el-date-picker
                  v-model="dateRange"
                  style="width: 240px"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  :clearable="false"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <template v-if="isShrink">
              <el-form-item label="项目编号" >
                <el-input  v-model="queryParams.proNo" placeholder="请输入项目编号" clearable style="width: 240px"  />
              </el-form-item>
              <el-form-item label="项目子编号" >
                <el-input   v-model="queryParams.proSubNo" placeholder="请输入项目子编号" clearable style="width: 240px"/>
              </el-form-item>
              <el-form-item label="收款人" >
                <el-input   v-model="queryParams.workName" placeholder="请输入收款人" clearable style="width: 240px"/>
              </el-form-item>
              <el-form-item label="服务商名称" >
                <el-input   v-model="queryParams.sydName" placeholder="请输入服务商名称" clearable style="width: 240px"/>
              </el-form-item>
              <el-form-item label="企业名称" >
                <el-input   v-model="queryParams.merName" placeholder="请输入企业名称" clearable style="width: 240px"/>
              </el-form-item>
              <el-form-item label="业务类型" >
                <el-select  v-model="queryParams.busType" placeholder="请选择业务类型" clearable style="width: 240px">
                  <el-option v-for="dict in wxfe_bus_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
              </template>
              <el-form-item>
                <el-button type="primary" @click="handleQuery" icon="Search"  >搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                <a class="my-link" @click="shrinkClick" v-if="isShrink">精简模式<el-icon><ArrowUp /></el-icon></a>
                <a class="my-link"  @click="shrinkClick" v-if="!isShrink">高级模式<el-icon><ArrowDown /></el-icon></a>
              </el-form-item>
            </el-form>
          </el-card>
  
        </div>
      </transition>
      <el-card shadow="hover">
        <el-table ref="roleTableRef"  v-loading="tableloading"  :data="operList" border>
          <el-table-column label="创建时间" align="center" prop="createTime"  width="180" >
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="企业名称" align="center" prop="merName" width="180" />
          <el-table-column label="服务商名称" align="center" prop="syName" :show-overflow-tooltip="true" width="180" />
          <el-table-column label="业务类型" align="center" prop="busType" :show-overflow-tooltip="true" width="100" >
            <template #default="scope">
              <dict-tag :options="wxfe_bus_type" :value="scope.row.busType" />
            </template>
          </el-table-column>
          <el-table-column label="项目总编号" align="center" prop="proNo" width="130" >
          </el-table-column>
          <el-table-column label="项目子编号" align="center" prop="proSubNo" width="140" />
          <el-table-column label="收款人" align="center" prop="workName" width="130" />
          <el-table-column label="项目内容" align="center" prop="workName" width="130" >
            <template #default="scope">
              <el-link type="primary"  @click="viewPro(scope.row)">查看项目内容</el-link>
            </template>
          </el-table-column>
          <el-table-column label="合同内容" align="center" prop="payeeName" :show-overflow-tooltip="true" width="130" >
            <template #default="scope">
              <el-link type="primary" @click="selFile(scope.row,5)">查看个人合同</el-link>
            </template>
          </el-table-column>
          <el-table-column label="转账凭证" align="center" prop="payeeAcc" :show-overflow-tooltip="true" width="220" >
            <template #default="scope" >
              <el-link type="primary" @click="selFile(scope.row,1)">b2c转账凭证</el-link>
              <el-divider direction="vertical" /> 
              <el-link type="primary" @click="selFile(scope.row,2)">b2b转账凭证</el-link>
            </template>
          </el-table-column>
          <el-table-column label="发票信息" align="center" prop="channel" :show-overflow-tooltip="true" width="100" >
            <template #default="scope">
              <el-link type="primary" @click="selFile(scope.row,3)">查看发票</el-link>
            </template>
          </el-table-column>
          <el-table-column label="完税证明" align="center" prop="tranType" :show-overflow-tooltip="true" width="100" >
            <template #default="scope">
              <el-link type="primary" @click="selFile(scope.row,4)">完税证明</el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
      <Detail  :openCheck="openDetailCheck" @dialogClose="dialogClose2" :item="item"></Detail>

    </div>
  
  </template>
  
  <script  setup name="taxMonitor" lang="ts">
  
  import {swMonitorList,getUrlInfo} from "@/api/operator/txMonitor";
  import Detail from "@/views/operator/taxMonitor/detail/index.vue";
    const router = useRouter();
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const queryFormRef = ref<ElFormInstance>();
    const tableloading = ref(false)
    const operList = ref([])
    const openDetailCheck  = ref(false)
    const item  = ref({})
    const total = ref(0)
    const isShrink = ref(false)
    const queryParams = ref({
      params:{
        startTime:"",
        endTime:""
      },
      startTime:'',
      endTime:'',
      billNo:"",
      payerName:'',
      payeeName:'',
      bankNo:'',
      tranType:null,
      channel:null,
      pageSize:10,
      pageNum:1
    });
    const showSearch = ref(true);
    const dateRange = ref(['', '']);
    const { tran_type } = toRefs<any>(proxy?.useDict('tran_type'));
    const { pay_channel } = toRefs<any>(proxy?.useDict('pay_channel'));
    const {wxfe_bus_type} = toRefs<any>(proxy?.useDict('wxfe_bus_type'));
   
    const convertFenToYuan = (fen:any)=>{
      if(!fen){
        return '--';
      }
      return (fen / 100).toFixed(2);
    }


    const dialogClose2 = ()=>{
      openDetailCheck.value  = false;
    }

    //查看附件
    const selFile = (row:any,type:any)=>{
        getUrlInfo({
          tailId:row.id,
          tailNo:row.billNo,
          busType:row.busType,
          subNo:row.proSubNo,
          workId:row.workId,
          merId:row.merId,
          sydId:row.sydId,
          type:type
        }).then((res)=>{
          if(res.data){
              if(type == 3){
                if(res.data == "1"){
                    downFile(row);
                }else{
                  proxy?.$modal.msgError(`未上传发票!`);
                }
                return ;
              }
              let extension = proxy?.isOpenUrl(res.data);
              if(extension){
                window.open(res.data);
              }else{
                let fileName = ""; 
                switch(type){
                  case 1:
                    fileName ="B2C电子回单";
                    break;
                  case 2:
                    fileName ="企业电子回单";
                    break;
                  case 3:
                    fileName ="发票";
                    break;
                  case 4:
                    fileName ="完税证明";
                    break;
                  case 5:
                    fileName ="个人协议";
                    break;
                }

                extension = proxy?.getExtension(res.data);
                proxy?.download("/resource/oss/dlurl", {
                 url:res.data,
                }, `${fileName}_${new Date().getTime()}.${extension?extension:''}`);
              }
          }else{
            switch(type){
              case 1:
                proxy?.$modal.msgError(`未生成B2C电子回单!`);
                break;
              case 2:
                proxy?.$modal.msgError(`未生成企业电子回单!`);
                break;
              case 3:
                proxy?.$modal.msgError(`未上传发票!`);
                break;
              case 4:
                proxy?.$modal.msgError(`未上传完税证明!`);
                break;
              case 5:
                proxy?.$modal.msgError(`未查询到个人协议!`);
                break;
            }

          }


        });


    }

    const downFile = (row)=>{
        proxy?.download("/payment/swMonitor/exportInv", {
          billNo:row.billNo,
         }, `发票信息_${new Date().getTime()}.zip}`);

      }

    //查询项目
    const viewPro = (row:any)=>{
        openDetailCheck.value = true;
        item.value = {
          id:row.proId,
          proSubNo : row.proSubNo
        }
    }


    /** 重置按钮操作 */
    const resetQuery = () => {
      dateRange.value = ['', '']
      queryFormRef.value?.resetFields();
      initDate();
      queryParams.value.pageNum = 1;
    }
  
  
    const shrinkClick = ()=>{
      if(isShrink.value){
        isShrink.value = false
      }else{
        isShrink.value = true
      }
  
    }
  
    const initDate = ()=>{
  
      // 获取当前日期
      let currentDate = new Date();
      // 创建一个新的Date对象，设置为当前月份的第一天
      let firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
      dateRange.value = [firstDayOfMonth.Format('yyyy-MM-dd'),currentDate.Format('yyyy-MM-dd')]
      queryParams.value.startTime  = firstDayOfMonth.Format('yyyy-MM-dd');
      queryParams.value.endTime  = currentDate.Format('yyyy-MM-dd');
    }
  
  /**  查询 */
    const handleQuery = ()=>{
      queryParams.value.pageNum = 1;
      queryParams.value.startTime = dateRange.value[0]
      queryParams.value.endTime = dateRange.value[1]
      getList();
    }
  
   /**
    * 查询列表
    */
   const getList = () => {
     tableloading.value = true
     swMonitorList(queryParams.value).then(res => {
       operList.value = res.rows
       total.value = res.total
       tableloading.value = false
     })
   }
  
   /** 导出按钮操作 */
   const handleExport = () => {
  
     proxy?.download("payment/operatorFlows/export", {
       ...queryParams.value,
     }, `交易流水_${new Date().getTime()}.xlsx`);
   };
  
  
    onMounted(() => {
      initDate();
      getList();
    });
  
  </script>
  
  <style>
  
  
  .my-link,.my-link:hover {
      /* 鼠标悬停时的样式 */
     color: #1890ff;
     text-decoration: none;
     background-color: transparent;
     outline: none;
     cursor: pointer;
     transition: color .3s;
     -webkit-text-decoration-skip: objects;
     padding-left:10px;
  }
  
  </style>
  